<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background: url(images/bj1.jpg);
            background-size: 100% 100%;
        }
        section{
            width: 124px;
            height: 185px;
            /* border: 5px solid #000; */
            position: fixed;
            top: 0;right: 0;bottom: 0;left: 0;
            margin: auto;
            background: url(images/a.gif) no-repeat center;
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg);
            animation: imgMove 3s infinite
        }
        img{
            width: 124px;
            height: 185px;
            position: absolute;/* 只要父级有定位属性，就相对于父级定位 */
            transform-origin: center center -500px;
            border: 1px solid #000
        }
        img:nth-child(1){
            transform: translateZ(500px) rotateY(36deg)
        }
        img:nth-child(2){
            transform: translateZ(500px) rotateY(72deg)
        }
        img:nth-child(3){
            transform: translateZ(500px) rotateY(108deg)
        }
        img:nth-child(4){
            transform: translateZ(500px) rotateY(144deg)
        }
        img:nth-child(5){
            transform: translateZ(500px) rotateY(180deg)
        }
        img:nth-child(6){
            transform: translateZ(500px) rotateY(216deg)
        }
        img:nth-child(7){
            transform: translateZ(500px) rotateY(252deg)
        }
        img:nth-child(8){
            transform: translateZ(500px) rotateY(288deg)
        }
        img:nth-child(9){
            transform: translateZ(500px) rotateY(324deg)
        }
        img:nth-child(10){
            transform: translateZ(500px) rotateY(360deg)
        }
        @keyframes imgMove{
            0%{transform: rotateX(30deg) rotateY(30deg)}
            25%{transform: rotateX(0) rotateY(120deg)}
            50%{transform: rotateX(-30deg) rotateY(210deg)}
            75%{transform: rotateX(0) rotateY(300deg)}
            100%{transform: rotateX(30deg) rotateY(390deg)}
        }
    </style>
</head>
<body>
    <section>
        <!-- <img src="images/pic1.png" alt="">
        <img src="images/pic2.png" alt="">
        <img src="images/pic3.png" alt=""> -->
        <img src="images/pic1.png" alt="">
        <img src="images/pic2.png" alt="">
        <img src="images/pic3.png" alt="">
        <img src="images/pic4.png" alt="">
        <img src="images/pic5.png" alt="">
        <img src="images/pic6.png" alt="">
        <img src="images/pic7.png" alt="">
        <img src="images/pic8.png" alt="">
        <img src="images/pic9.png" alt="">
        <img src="images/pic10.png" alt="">
    </section>
</body>
</html>
<!-- 
    解决旋转木马两张图片视觉效果在一起的问题
        - 在img外面嵌套一个盒子
        - 可以给当前图片添加一个边框
 -->